<template>

	<!-- 回复工单页 -->
	<div style="width: 100%;overflow: hidden;padding-bottom: 120rpx;">
		<div style="height: 100%;padding: 20rpx">
			<uni-forms ref="form" :modelValue="entity" label-width="100px">
				<view>

					<uni-forms-item label="客户名称" v-model="entity.CustomerName">
						<uni-easyinput v-model="entity.CustomerName" placeholder="请输入客户名称" :disabled="disabled" />
					</uni-forms-item>
					<uni-forms-item label="工单标题" v-model="entity.SWOTitle">
						<uni-easyinput v-model="entity.SWOTitle" placeholder="请输入工单标题" :disabled="disabled" />
					</uni-forms-item>
					<uni-forms-item label="开始日期：" name="StartTime">
						<view @click="isCalendar=true">
							<uni-easyinput v-model="entity.StartTime" placeholder="请选择开始日期" :disabled="disabled" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="截止日期：" name="EndTimeRqstd">
						<view @click="isCalendar=true">
							<uni-easyinput v-model="entity.EndTimeRqstd" placeholder="请选择截止日期" :disabled="disabled" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="工单内容" v-model="entity.SWOContent">
						<uni-easyinput v-model="entity.SWOContent" placeholder="请输入工单内容" :disabled="disabled"
							type="textarea" />
					</uni-forms-item>
				</view>

				<!-- 顶部导航栏切换 -->
				<view>
					<u-tabs name="name" :list="tabsList" active-color="#2979ff" inactive-color="#606266" font-size="30"
						:is-scroll="false" :current="currentIndex" @change="onClickItem"></u-tabs>
					<!-- 	<uni-segmented-control :current="currentIndex" :values="tabsList" :style-type="'text'"
						:active-color="'#007aff'" @clickItem="onClickItem" /> -->
				</view>

				<view v-if="currentIndex==0" style="padding: 20rpx 0;">
					<uni-forms-item label="费用金额">
						<uni-easyinput v-model="entity.ExpenseInfo" placeholder="请输入费用信息,没有可以不填" />
					</uni-forms-item>
					<uni-forms-item label="反馈信息" :rules="$rules.handle.FeedbackInfo" name="FeedbackInfo" required>
						<uni-easyinput v-model="entity.FeedbackInfo" placeholder="请输入反馈的信息" type="textarea" />
					</uni-forms-item>
				</view>

				<!-- 回复历史记录 -->
				<view class="scrollBox" v-else>
					<scroll-view style="width: 100%;height: 100%;" scroll-y="true">
						<uni-list v-for="item in list" :key="item.Id">
							<uni-list-item v-if="item.ExpenseInfo"
								:title="`${item.ExecutorName}   ￥${item.ExpenseInfo || ''}`"
								:note="'回复内容: '+ item.FeedbackInfo" :rightText="item.CreateTime" />
							<uni-list-item v-else :title="`${item.ExecutorName}   ￥0.00`"
								:note="'回复内容: '+ item.FeedbackInfo" :rightText="item.CreateTime" />
						</uni-list>
						<view style="color:#333;text-align: center;padding: 30rpx;">
							没有更多了
						</view>
					</scroll-view>
				</view>

			</uni-forms>
			<!-- v-if="!disabled" -->
			<div class="submitButton">
				<u-button type="primary" style="font-size: 14px;margin-top: 20rpx;" @click="onSubmit()"
					:loading="loading">回复</u-button>
			</div>
		</div>

		<!-- <Myuser ref="myuser" /> -->

		<!-- 选择日期 -->
		<u-calendar v-model="isCalendar" :mode="mode" placeholder="请选择日期" @change="calendarChange"></u-calendar>
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import {
		ServiceWorkOrderMainGetTheDataForDetail,
		ServiceWorkOrderDetailSaveData
	} from '@/api/interface.js'
	//客户
	// import Myuser from "../../components/OwnUser.vue";
	// 引入公共头部组件
	export default {
		props: {
			parentObj: Object,
		},
		components: {
			// Myuser,
		},
		data() {
			return {
				// 是否禁用
				disabled: false,
				// 是否显示日期组件
				isCalendar: false,
				// 日期选择
				mode: 'date',
				// tab切换
				currentIndex: 0,
				// tab切换数据
				tabsList: [{
					key: 0,
					name: '反馈信息'
				}, {
					key: 1,
					name: '历史记录'
				}],
				loading: false,
				info: {},
				entity: {
					ExpenseInfo: 0
				},
				data: [],
				list: [],
				Id: "",
				// 传递过来的对象
				options: {}
			};
		},
		computed: {
			...mapState(["UserInfo", ]),
		},
		onLoad(options) {
			if (options.title === '待办') this.disabled = true
			// 缓存获取用户信息
			this.info = this.UserInfo.UserInfo
			this.openForm(options);
		},
		methods: {
			// tab导航栏切换
			// 我的发起导航栏点击事件
			onClickItem(index) {
				console.log('点击的是', index)
				this.currentIndex = index
			},
			// 选择日期
			calendarChange(event) {
				this.entity.StartTime = event.result
			},

			// 回复提交

			onSubmit() {
				var that = this
				this.$refs.form.validate().then(res => {
					uni.showLoading({
						title: '回复中'
					})
					this.loading = true
					let row = {};
					console.log(this.entity);
					row.SWOMId = this.entity.Id;
					row.ExecutorId = this.info.Id;
					row.ExecutorName = this.info.RealName;
					row.FeedbackInfo = this.entity.FeedbackInfo;
					row.ExpenseInfo = this.entity.ExpenseInfo;
					this.loading = true

					ServiceWorkOrderDetailSaveData(row)
						.then(resJson => {
							if (resJson.Success) {
								that.$sucessToast('回复成功!');
								setTimeout(() => {
									uni.navigateBack()
									uni.hideLoading()
									that.loading = false
								}, 2000);
							} else {
								this.$errorToast(resJson.Msg)
								this.loading = false;
								uni.hideLoading()
								uni.navigateBack()
							}
						});

				}).catch(err => {
					this.$errorToast(err)
					uni.hideLoading()
					that.loading = false
				})

			},
			openForm(item) {
				this.show = true;
				if (item.Id) {
					ServiceWorkOrderMainGetTheDataForDetail({
							id: item.Id
						})
						.then(resJson => {
							if (resJson.Success && resJson.Data) {
								this.entity = resJson.Data;
								this.list = resJson.Data.SWODList;
								this.list.forEach(item => {
									item.CreateTime = this.$moment(item.CreateTime).format(
										'YYYY-MM-DD HH:mm:ss')
								})
								if (this.entity.StartTime) {
									this.$set(
										this.entity,
										"StartTime",
										this.$moment(this.entity.StartTime).format('YYYY-MM-DD')
									);
								}
								if (this.entity.EndTimeRqstd) {
									this.$set(
										this.entity,
										"EndTimeRqstd",
										this.$moment(this.entity.EndTimeRqstd).format('YYYY-MM-DD')
									);
								}

							} else {
								this.$errorToast(resJson.Msg);
							}
						});
				}

			}
		}
	};
</script>
<style>
	page {
		background-color: #fff;
	}

	.scrollBox {
		margin-bottom: 130rpx;
		/* #ifdef H5 */
		height: calc(100vh - 410px);
		/* #endif */
		/* #ifdef APP */
		height: calc(100vh - 220px);
		/* #endif */
	}

	/* 适配底部导航栏 */
	.submitButton {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 150px;
		/*暂时发现安卓小屏手机安全区为0 && 不带单位的话padding-bottom会失效，写一个兜底, 并写在最上面；f12发现css样式如果都给height设置样式，会依次往下，用最底下的一个样式，如果最下面的没失效，依次往上查找，所以兜底的写在最上面 */
		height: calc(150rpx + constant(safe-area-inset-bottom));
		/* 直接扩展高度，因为padding-bottom是内边距 */
		height: calc(150rpx + env(safe-area-inset-bottom));
		/* 直接扩展高度 */
		background: #fff;
		padding-top: 10rpx;
		box-sizing: border-box;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 iOS<11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容iOS>= 11.2*/
		border-top: 1px solid #e9e9e9;
		padding-left: 15px;
		padding-right: 15px;
	}
</style>